JavaScript es el lenguaje que nos va a permitir realizar modificaciones "en vivo" en nuestro documento, sin necesidad de tener que volver a cargar el contenido desde el servidor. Es un lenguaje que se ejecuta por completo en el navegador, como HTML y CSS, pero a diferencia de estos otros, que son lenguaje de marcas o formato, JavaScript es un lenguaje de programación. Esto significa que esta compuesto por una serie de instrucciones que permiten recibir información, procesar esa información y devolver una respuesta condicionada por ese proceso.
Como lenguaje de programación JavaScript está sujeto a una lógica de programación, y tiene un conjunto de expresiones y elementos que permiten realizar las estructuras de programación aplicando esas expresiones.
Además, como lenguaje específico para trabajar con documentos web, tiene una serie de expresiones para acceder y manipular el DOM, es decir, la estructura de árbol de elementos de un documento web.
Nuestro objetivo en este curso será doble: Por una parte entender la lógica de la programación, conociendo las expresiones que usa javascript para establecer el flujo del guión. Y por otro, conocer las instrucciones, esto es las propiedades y los métodos, con los que cuenta este lenguaje para realizar cambios en el documento web.
El código JavaScript se inserta dentro de etiquetas script que colocaremos al final del documento, antes de cierre de body, cuando el código va insertado en el propio documento, para asegurar que todo el código se lee cuando ya hemos cargado el HTML.
También podemos insertarlo desde un archivo de script externo, con formato .js, y en ese caso se suele incluir en el head del documento, aunque también podemos insertarlo al final del body, como en el caso anterior. Para asegurarnos de que el archivo externo se carga una vez que todo el HTML ha sido procesado por el navegador usamos el atributo defer dentro de la etiqueta. Este sería un ejemplo:
<script src="codigo.js" defer="defer"></script>Todas las instrucciones escritas dentro de un script se leen y se ejecutan en el orden en el que aparecen en el script. Y esta tarea se hace al mismo tiempo que se carga la página. Con lo cual, las instrucciones colocadas directamente en la etiqueta script se ejecutarán en el momento en que se cargue la página y se lean esas órdenes, y ya no se volverán a leer, (ni por lo tanto a ejecutar).
Eso significa que para tener instrucciones que no se ejecuten inmediatamente al cargar la página, o para poder volver a utilizarlas más veces, tendremos que aislar esas instrucciones de la parte principal del script. Ese aislamiento de los fragmentos de código lo conseguimos a través de las funciones. De forma general, una función es un conjunto de instrucciones (o bloque de código) que está agrupado con un nombre, y que será ejecutado cada vez que llamemos a esa función.
Las funciones nos permiten crear estructuras de programación más complejas de una manera más sencilla, usándolas como conjuntos de componentes modulares, en el que cada función se encarga de algo diferente, que se pueden combinar para realizar tareas más elaboradas.
En el momento en que el código queda organizado por funciones, es necesario tener una forma de indicarle al navegador que debe ejecutar una determinada función. Al no ser interpretado de forma inmediata al cargar la página, hay que indicarle cuando tiene que hacerlo. Esta es una parte fundamental en la programación con JavaScript, y es controlada por lo que conocemos como eventos.
Un evento es cualquier cambio en el documento que sea reconocido por el navegador, y que sirva para desencadenar una acción de código. Por lo tanto, en este contexto, un evento es un desencadenante para ejecutar un determinado código.
La forma de vincular ese código al evento correspondiente, es mediante una instrucción de JavaScript en la que le decimos al navegador que esté preparado para detectar ese evento en concreto, y cada vez que lo detecte (escuche) ejecute la función o las instrucciones que le indiquemos.
Los eventos se pueden clasificar en dos tipos generales:
Lo que tienen en común todos ellos es que son los elementos que nos van a servir para lanzar unos u otros bloques de código de forma condicionada, y que por lo tanto van a aportar el dinamismo necesario a nuestras aplicaciones. Con los eventos se rompe la linealidad de la ejecución de código, y este se interpreta según se produzcan o no los desencadenantes correspondientes.
Lo primero que debemos saber es que JavaScript diferencia entre mayúsculas y minúsculas, con lo que tenemos que ser cuidadosos a la hora de escribir. Para este lenguaje nombre, Nombre y NOMBRE son tres elementos distintos, y si por ejemplo, fuesen nombres de variable en este caso, estaríamos hablando de tres variables diferentes. Ocurre lo mismo con los métodos y propiedadas del lenguaje, cambiar una sola letra es suficiente para que no sea reconocido: por ejemplo, el método getElementById() necesita ser escrito exáctamente así, con ese orden de letras minúsculas y mayúsculas, y cualquier otra variación será considerada como un error.
Otra consideración importante es que JavaScript es un lenguaje no tipado, o levemente tipado frente a otros lenguajes que sí lo son. Esto significa que en JavaScript no es necesario declarar los tipos de datos de las variables antes de inicializarlas, realmente no es necesario siquiera declarar las variables antes de usarlas, aunque esa es una mala práctica a evitar. También significa que una variable puede cambiar de tipo de datos a lo largo del script sin ningún problema. Y lo que empieza como un string puede pasar a un number, cambiar luego a un array y acabar en un object sin problema. Aunque esto también sea algo a evitar por una cuestión de coherencia y comprensión del código.
También conviene saber que JavaScript usa el punto y coma (;) como elemento indicador de fin de instrucción. Aunque no es algo obligatorio, y podemos prescindir de él sin que el código devuelva errores, sí es conveniente usarlo para mantener la uniformidad y coherencia con otros lenguajes.
Por último, en JavaScript tenemos dos formas de añadir comentarios en nuestro código: Si íunicamente queremos comentar una línea (o la parte final de ella) usaremos dos barras seguidas (//). Y si queremos comentar un bloque de instrucciones usaremos la misma notación que en CSS, /* al principio del bloque a comentar y */ al final.
Unas muestras de cómo funciona este lenguaje:
El siguiente botón ejecutará una función que muestra un mensaje en pantalla al hacer clic sobre él
El código necesario para realizar esta tarea es
//almaceno en una variable el texo del mensaje
let texto = 'Ejemplo de manipulación del DOM';
function muestraMensaje() {
window.alert(texto);
}
Y el código del botón para que ejecute esa función:
<button onclick="muestraMensaje()">Mensaje en pantalla</button>
El siguiente botón cambiará el texto de un párrafo y su formato al pulsar sobre él, ejecutando esté código:
function cambiaParrafo() {
document.getElementById('parrafo_1').textContent = texto;
document.getElementById('parrafo_1').style.backgroundColor = 'lime';
document.getElementById('parrafo_1').style.color = 'darkgreen';
document.getElementById('parrafo_1').style.fontSize = '3rem';
}
Este es el párrafo que va a cambiar
El siguiente botón hace lo mismo que el anterior con otro párrafo, pero hemos usado una variable para identificar el elemento que queremos modificar, de forma que resulte más sencillo a la hora de trabajar. Además, después de realizar el cambio muestra un mensje de despedida. Este es el código:
function cambiaDos() {
let parr_2 = document.getElementById('parrafo_2');
parr_2.textContent = 'Otro párrafo añadido mediante programación que incluye el texto del párrafo anterior: ' + texto;
parr_2.style.color = 'darkred';
parr_2.style.fontSize = '2rem';
//Mensaje de despedida
texto = 'Cambio realizado!';
alert(texto);
}
Este párrafo también cambia